@mixin header {
  .header{
    line-height: 50rpx;
    font-family: PingFangSC-Medium;
    font-size: 36rpx;
    color: #DFDFDF;
    margin: 44rpx 0 16rpx 0;
  }
}
.movie{
  width: 100%;
  // 头部
  .movie-header{
    display: flex;
    align-items: center;
    padding: 19rpx 40rpx;
    background: #33363d;
    .city{
      opacity: 0.78;
      font-family: PingFangSC-Regular;
      font-size: 28rpx;
      color: #DFDFDF;
      margin-right: 74rpx;
      image{
        width: 26.3rpx;
        height: 13.6rpx;
        margin-left: 9.4rpx;
      }
    }
    .switch{
      width: 328rpx;
      height: 50rpx;
      opacity: 0.78;
      font-family: PingFangSC-Regular;
      font-size: 28rpx;
      color: #DFDFDF;
      line-height: 50rpx;
      text-align: center;
      margin-right: 148rpx;
      display: flex;
      .hot{
        width: 50%;
        height: 100%;
        border: 2rpx solid #F19E65;
        border-radius: 12rpx 0 0 12rpx;
      }
      .coming{
        width: 50%;
        height: 100%;
        border: 2rpx solid #F19E65;
        border-radius: 0 12rpx 12rpx 0;
      }
    }
    .search{
      width: 27.3rpx;
      height: 27rpx;
    }
  }
  // 正在热映电影列表
  .hot-content{
    padding: 0 40rpx;
    margin-top: 28rpx;
    .item{
      width: 100%;
      margin-bottom: 28rpx;
      display: flex;
      // 图片
      .img-container{
        width: 210rpx;
        height: 312rpx;
        position: relative;
        border-radius: 10rpx;
        overflow: hidden;
        box-shadow: 0 0 8rpx 4rpx rgba(0,0,0,0.04);
        image{
          width: 100%;
          height: 100%;
        }
        .pause{
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          image{
            width: 76rpx;
            height: 76rpx;
            border-radius: 50%;
            margin: auto;
          }
        }
      }
      // 右侧详细内容
      .content{
        position: relative;
        flex-grow: 1;
        margin-top: 20rpx;
        padding: 24rpx 0 0 20rpx;
        background: #33363D;
        box-shadow: 0 0 8rpx 4rpx rgba(0,0,0,0.04);
        border-radius: 0 12rpx 12rpx 0;
        .title{
          height: 45rpx;
          font-family: PingFangSC-Medium;
          font-size: 32rpx;
          color: #FFFFFF;
          margin-bottom: 3rpx;
        }
        .rating_average{
          height: 42rpx;
          font-family: PingFangSC-Regular;
          font-size: 28rpx;
          color: #FFFFFF;
          margin-bottom: 12rpx;
          text{
            font-size: 30rpx;
            color: #fbc34a;
          }
        }
        .director, .scriptwriter{
          opacity: 0.47;
          font-family: PingFangSC-Regular;
          font-size: 24rpx;
          color: #FFFFFF;
          margin-bottom: 5rpx;
        }
        .todayHot{
          width: 96rpx;
          height: 34rpx;
          margin-top: 27rpx;
          line-height: 34rpx;
          font-size: 23rpx;
          text-align: center;
          border: 2rpx solid #FBC34A;
          border-radius: 5rpx;
          color: #FBC34A;
        }
        .buy{
          position: absolute;
          top: 132rpx;
          right: 28rpx;
          width: 108rpx;
          height: 50rpx;
          background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
          box-shadow: 0 0 8rpx 2rpx rgba(242,109,125,0.18);
          border-radius: 12rpx;
          line-height: 50rpx;
          text-align: center;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }
    }
  }
  // 即将上映电影列表
  .coming-content{
    // 热门预告片
    .hot-coming{
      padding-left: 40rpx;
      @include header;
      // 轮播图
      .swiper{
        width: 100%;
        height: 370rpx;
        swiper{
          height: 100%;
        }
        // 图片
        .img-container{
          width: 636rpx;
          height: 370rpx;
          position: relative;
          border-radius: 10rpx;
          overflow: hidden;
          image{
            width: 636rpx;
            height: 370rpx !important;
          }
          .mask{
            width: 90%;
            position: absolute;
            bottom: 16rpx;
            left: 20rpx;
            display: flex;
            justify-content: space-between;
            .left{
              font-family: PingFangSC-Regular;
              font-size: 28rpx;
              color: #DFDFDF;
            }
            .right{
              font-family: PingFangSC-Regular;
              font-size: 24rpx;
              color: #FFFFFF;
            }
          }
          .pause{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            image{
              width: 76rpx;
              height: 76rpx !important;
              border-radius: 50%;
              margin: auto;
            }
          }
        }
      }
    }
    // 即将上映
    .list{
      @include header;
      .header{
        padding-left: 40rpx;
      }
      .nav{
        margin: 22rpx 0 44rpx 0;
        display: flex;
        overflow: auto;
        .nav-item{
          flex-shrink: 0;
          width: 164rpx;
          box-sizing: border-box;
          border: 4rpx solid #979797;
          border-radius: 26rpx;
          font-family: PingFangSC-Regular;
          font-size: 28rpx;
          color: #969393;
          padding: 5rpx 0;
          margin-right: 32rpx;
          text-align: center;
        }
      }
      // 正在热映电影列表
      .list{
        padding: 0 40rpx;
        margin-top: 28rpx;
        .item{
          width: 100%;
          margin-bottom: 28rpx;
          display: flex;
          // 图片
          .img-container{
            width: 234rpx;
            height: 280rpx;
            position: relative;
            border-radius: 10rpx;
            overflow: hidden;
            box-shadow: 0 0 8rpx 4rpx rgba(0,0,0,0.04);
            image{
              width: 100%;
              height: 100%;
            }
            .pause{
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              display: flex;
              image{
                width: 76rpx;
                height: 76rpx;
                border-radius: 50%;
                margin: auto;
              }
            }
          }
          // 右侧详细内容
          .content{
            position: relative;
            flex-grow: 1;
            padding: 24rpx 0 0 20rpx;
            background: #33363D;
            box-shadow: 0 0 8rpx 4rpx rgba(0,0,0,0.04);
            border-radius: 0 12rpx 12rpx 0;
            .title{
              width: 416rpx;
              height: 45rpx;
              font-family: PingFangSC-Medium;
              font-size: 36rpx;
              color: #FFFFFF;
              margin-bottom: 24rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .rating_average{
              height: 42rpx;
              font-family: PingFangSC-Regular;
              font-size: 28rpx;
              color: #FFFFFF;
              margin-bottom: 20rpx;
              text{
                font-size: 30rpx;
                color: #fbc34a;
              }
            }
            .director, .scriptwriter{
              opacity: 0.47;
              font-family: PingFangSC-Regular;
              font-size: 24rpx;
              color: #FFFFFF;
              margin-bottom: 7rpx;
            }
            .buy{
              position: absolute;
              top: 132rpx;
              right: 28rpx;
              width: 108rpx;
              height: 50rpx;
              background-image: linear-gradient(150deg, #624BA3 0%, #CB4498 100%);
              box-shadow: 0 0 8rpx 2rpx rgba(242,109,125,0.18);
              border-radius: 12rpx;
              line-height: 50rpx;
              text-align: center;
              font-size: 24rpx;
              color: #FFFFFF;
            }
          }
        }
      }
    }
  }
}
// 动态样式
.switch-active{
  border: none;
  color: #F5F5F5;
  background: linear-gradient(to left, #F19E65 0%, #F2697F 100%);
}
.nav-item-active{
  background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
  box-shadow: 0 0 20rpx 0 rgba(242,109,125,0.40);
  border: 4rpx solid rgba(242,109,125,0.40) !important;
  color: #fff !important;
}